<template>
  <div id="guarantee">
    <x-header :left-options="{backText: ''}">本金保障</x-header>
    <!-- <x-header :left-options="{showBack: false}">
      <a slot="left" @click="goBack()">
        <i class="iconfont icon-back"></i>
      </a>
      {{$route.meta.title}}
    </x-header> -->
    <div class="guar_back">
      <img src="./image/jin_rong_back@2x.png"
           alt="">
    </div>
    <div class="guar_con">
      <div class="guar_con_text">
        <h2>保本金政策</h2>
        <p>首次进货可参与保本金政策，要求固定进货</p>
        <p>单数，20日内可随时退货退款，中途自行进</p>
        <p>出货交易视为解除保本金政策协议。交易结</p>
        <p>果完全由用户本人自行承担。</p>
      </div>
      <div class="edit_keep_btn">
        <button class="keep_btn"
                @click="onBreakEven()">保本金进货</button>
      </div>
      <div class="edit_keep_btn">
        <button class="keep_btn"
                @click="onSendBack()">退回本金</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getPriceTrend, addtransactionrecord, pushcapitalbuy, capitalretreat, iscapitalretreat } from '@api'
import { mapState } from 'vuex'
import { GetQueryString } from '@utils/mixin'
import Vue from 'vue'
import { Confirm } from 'wc-messagebox'
import 'wc-messagebox/style.css'
Vue.use(Confirm)
export default {
  name: 'guarantee',
  data () {
    return {
      payType: 1,
      means: 6, // 交易方式 保本金
      account_type: 3, // 支付宝账户
      quantity: 20, // 保本金单数
      transactionparice: 0, // 交易单价
      no: '' // 创建的订单号
    }
  },
  computed: {
    ...mapState(['user', 'token', 'openid'])
  },
  methods: {
    // 保本金进货
    onBreakEven () {
      var that = this
      that.$vux.confirm.show({
        title: '保本金进货',
        content: '您将参与保本金进货活动，中途交易将失去保本金政策！',
        onConfirm: () => {
          that.capitalBuy()
        }
      })
    },
    async capitalBuy () {
      // 判断是否参与过保本金活动
      let fo = new FormData()
      fo.append('userid', this.user.user_id)
      fo.append('goodsid', this.$route.query.goodsid)
      let isres = await iscapitalretreat(fo)
      if (isres && isres.code === 200) {
        this.$vux.alert.show({
          title: '提示',
          content: '您已参与过保本金活动!'
        })
        return false
      }
      // 创建交易记录 待支付

      // 获取当日实时价
      this.getrealtimeprice()

      let formadd = new FormData()
      formadd.append('record_user_id', this.user.user_id) // 交易用户
      formadd.append('record_goods_id', this.$route.query.goodsid) // 交易商品id
      formadd.append('commission_price', this.transactionparice) // 交易委托单价
      formadd.append('commission_num', this.quantity) // 交易委托数量
      formadd.append('paymentmethod', this.account_type) // 交易支付方式
      formadd.append('record_transaction_means', this.means) // 交易方式
      var resadd = await addtransactionrecord(formadd) // 添加未支付订单 等待支付
      if (resadd && resadd.code === 200) {
        this.no = resadd.data

        let code = GetQueryString('code')
        let form = new FormData()
        form.append('order_no', this.no)
        form.append('price', this.transactionparice)
        form.append('order_type', 'goods')
        form.append('pay_type', this.payType)
        form.append('code', code)
        form.append('body', this.no)
        form.append('attach', this.no)
        form.append('return_url', window.location.href)
        if (this.openid) {
          form.append('openid', this.openid)
        }

        let res = await pushcapitalbuy(form)
        if (res && res.code === 200) {
          if (res.data.type === 'ali_jsapi') {
            this.$AliPay(res.data).then(() => {
              this.goBack()
            })
          } else if (res.data.type === 'wx_h5') {
            this.$toastText('未知错误，请联系管理员处理。')
          } else {
            this.$vux.toast.text('未知错误，请联系管理员处理。')
          }
        }
      }
    },
    // 保本金退货
    onSendBack () {
      var that = this
      that.$vux.confirm.show({
        title: '退回本金',
        content: '您的本金将退回到您的余额中，可随时体现。',
        onConfirm: () => {
          that.CapitalRetreat()
        }
      })
    },
    async CapitalRetreat () {
      let form = new FormData()
      form.append('userid', this.user.user_id)
      form.append('goodsid', this.$route.query.goodsid)
      var res = await capitalretreat(form)
      if (res && res.code === 200) {
        this.$vux.alert.show({
          title: '提示',
          content: '保本金活动退出成功，请查看余额！'
        })
      } else {
        this.$vux.alert.show({
          title: '提示',
          content: '您未参与保本金活动，无法退回本金！'
        })
      }
    },
    async getrealtimeprice () {
      // 获取开盘价 当做交易价
      let form = new FormData()
      form.append('goodsid', this.$route.query.id)
      let respt = await getPriceTrend(form)
      if (respt && respt.code === 200 && respt !== null) {
        this.transactionparice = respt.data.current_price // 交易单价
      } else {
        this.transactionparice = respt.data // 交易单价
      }
    }
  }
}
</script>

<style lang="less" scoped="scoped">
#guarantee {
  background: #1e0064;
  position: relative;
  min-height: 100vh;
  /deep/ .vux-header {
    background: #3901a0;
    .vux-header-left {
      .left-arrow:before {
        border: 0.026667rem solid #ffffff;
        border-right-width: 0;
        border-bottom-width: 0;
      }
      i {
        color: #ffffff;
      }
    }
    .vux-header-title {
      color: #ffffff;
    }
  }
  .guar_back {
    width: 100%;
    height: 5.275rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .guar_con {
    width: 7.4125rem;
    height: 8.9375rem;
    background: rgba(255, 255, 255, 1);
    position: absolute;
    left: 50%;
    top: 5.5rem;
    transform: translateX(-50%);
    .guar_con_text {
      text-align: center;
      padding: 0.625rem;
      h2 {
        font-size: 0.4rem;
        font-family: SourceHanSansSC-Bold;
        font-weight: bolder;
        color: rgba(0, 0, 0, 1);
        line-height: 0.625rem;
      }
      p {
        font-size: 0.3rem;
        font-family: SourceHanSansSC-Normal;
        font-weight: normal;
        color: rgba(0, 0, 0, 1);
        line-height: 0.625rem;
      }
    }
  }
}

.edit_keep_btn {
  margin: 0.625rem 0;
  padding: 0 0.375rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  button.keep_btn {
    width: 3.75rem;
    height: 0.925rem;
    border-radius: 0.125rem;
    border: none;
    background: #ffcc00;
    text-align: center;
    color: #ffffff;
  }
}
</style>
